<template>
  <div class="wrapper">
    <div class="container">
      <info-header></info-header>

      <div class="task_list">
        <div class="title">今日任务</div>

        
        <!-- 基础知识 -->
        <div class="list task1" v-if="foundationList.length !== 0">
          <div class="sub_title">
            <i></i>
            <span></span>
          </div>

          <ul class="class_list">
            <li class="class_item" v-for="(item, index) in foundationList" :key="index" @click="toStudyPage(item)">
              <div  clickVoice="true" :class="`type_${item.subjectType}`">
                <div class="class_type"></div>
                <span clickVoice="true" class="class_title">{{item.subjectName}}</span>
              </div>
              <i class="icon_complete" v-if="item.isFinish == 1"></i>
              <i class="icon_uncom" v-if="item.isFinish == 0"></i>
            </li>
            
          </ul>
        </div>

        
        <!-- 能力拓展 -->
        <div class="list task2" v-if="expansionList.length !== 0">
          <div class="sub_title">
            <i></i>
            <span></span>
          </div>
          <ul class="class_list">
            <li class="class_item" v-for="(item, index) in expansionList" :key="index" @click="toStudyPage(item)">
              <div clickVoice="true" :class="`type_${item.subjectType}`">
                <div class="class_type "></div>
                <span clickVoice="true" class="class_title">{{item.subjectName}}</span>
              </div>
              <i class="icon_complete" v-if="item.isFinish == 1"></i>
              <i class="icon_uncom" v-if="item.isFinish == 0"></i>
            </li>
            
          </ul>

          
        </div>

        <!-- 打卡任务 -->
        <div class="list task3" v-if="clockList.length !== 0">
          <div class="sub_title">
            <i></i>
            <span></span>
          </div>
          <ul class="class_list">
            <li class="class_item" v-for="(item, index) in clockList" :key="index" @click="toStudyPage(item)">
              <div clickVoice="true" :class="`type_${item.subjectType}`">
                <div class="class_type"></div>
                <span clickVoice="true" class="class_title">{{item.subjectName}}</span>
              </div>
              <!-- <i class="icon_complete" v-if="item.isFinish == 1"></i> -->
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.icon_complete {
  display: inline-block;
  width: 1.24rem;
  height: .673333rem;
  background: url('../assets/img/icon_com.png') 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  right: 1.766667rem;
  top: -0.213333rem;
}
.icon_uncom {
  display: inline-block;
  width: 1.24rem;
  height: .673333rem;
  background: url('../assets/img/icon_uncom.png') 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  right: 1.766667rem;
  top: -0.213333rem;
}
.class_list .class_item {
  height: 2.106667rem;
  display: flex;
  margin-bottom: .4rem;
  position: relative;
}

.class_item > div {
  width: 100%;
  
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.class_item .type_pinyin, 
.class_item .type_zydk, 
.class_item .type_shizi, 
.class_item .type_hbyd
{
  background: url('../assets/img/class_bg1.png') 0 0 no-repeat;
  background-size: contain;
}
.class_item .type_jisuan, 
.class_item .type_yingyu,
.class_item .type_jyzzl {
  background: url('../assets/img/class_bg2.png') 0 0 no-repeat;
  background-size: contain;
}
.class_item .type_tzyd,
.class_item .type_sxsw,
.class_item .type_kxxsy,
.class_item .type_cygs
{
  background: url('../assets/img/class_bg3.png') 0 0 no-repeat;
  background-size: contain;
}
.class_item .type_xgyc,
.class_item .type_cyms {
  background: url('../assets/img/class_bg4.png') 0 0 no-repeat;
  background-size: contain;
}
.class_item .class_type {
  width: 1.493333rem;
  height: 1.493333rem;
  margin-left: .30rem;
  margin-right: .36rem;
}
.class_item .class_title {
  display: inline-block;
  font-size: .426667rem;
  width: 4.433333rem;
}
.class_list .class_item:before {
  content: '';
  display: inline-block;
  height: 2.106667rem;
  width: .346667rem;
  background: url('../assets/img/circle_line.png') 0 0 no-repeat;
  background-size: contain;
  margin-right: .426667rem;
  margin-left: .333333rem;
}

.sub_title {
  /* display: flex; */
  align-items: center;
}
.sub_title i {
  display: inline-block;
  width: 1.106667rem;
  height: 1.04rem;
  background: url('../assets/img/icon_star.png') 0 0 no-repeat;
  background-size: contain;
}

.list .sub_title span{
  display: inline-block;
  width: 1.92rem;
  height: .573333rem;
}
.task1 .sub_title span {
  background: url('../assets/img/sub_title1.png') 0 0 no-repeat;
  background-size: contain;
}
.task2 .sub_title span {
  background: url('../assets/img/sub_title2.png') 0 0 no-repeat;
  background-size: contain;
}
.task3 .sub_title span {
  background: url('../assets/img/sub_title3.png') 0 0 no-repeat;
  background-size: contain;
}

.task_list {
  padding: .2rem .346667rem;
  box-sizing: border-box;
  background: rgb(247, 249, 255);
  margin-bottom: 1.333333rem;
}
.task_list .title {
  display: flex;
  align-items: center;
  font-size: .4rem;
  color: #333;
  margin-bottom: .2rem;
}
.task_list .title:before {
  content: '';
  display: inline-block;
  width: .173333rem;
  height: .533333rem;
  background: #ffd33d;
  border-radius: .133333rem;
  margin-right: .266667rem;
}

.type_pinyin .class_type {
  background: url('../assets/img/pinyin.png') center center no-repeat;
  background-size: 60%;
}
.type_jisuan .class_type {
  background: url('../assets/img/jisuan.png') center center no-repeat;
  background-size: 60%;
}
.type_tzyd .class_type {
  background: url('../assets/img/kuozhan.png') center center no-repeat;
  background-size: 60%;
}
.type_zydk .class_type {
  background: url('../assets/img/zuoye.png') center center no-repeat;
  background-size: 60%;
}
.type_xgyc .class_type {
  background: url('../assets/img/xiguan.png') center center no-repeat;
  background-size: 60%;
}
.type_shizi .class_type {
  background: url('../assets/img/shizi.png') center center no-repeat;
  background-size: 60%;
}
.type_sxsw .class_type {
  background: url('../assets/img/sxsw.png') center center no-repeat;
  background-size: 60%;
}
.type_yingyu .class_type {
  background: url('../assets/img/yingyu.png') center center no-repeat;
  background-size: 60%;
}
.type_hbyd .class_type {
  background: url('../assets/img/hbyd.png') center center no-repeat;
  background-size: 60%;
}
.type_cyms .class_type {
  background: url('../assets/img/cyms.png') center center no-repeat;
  background-size: 60%;
}
.type_cygs .class_type {
  background: url('../assets/img/cygs.png') center center no-repeat;
  background-size: 60%;
}
.type_jyzzl .class_type {
  background: url('../assets/img/jyzzl.png') center center no-repeat;
  background-size: 60%;
}
.type_kxxsy .class_type {
  background: url('../assets/img/kxxsy.png') center center no-repeat;
  background-size: 60%;
}



.lock:before {
  content: '';
  display: inline-block;
  height: 2.106667rem;
  width: .346667rem;
  background: url('../assets/img/lock_line.png') 0 0 no-repeat !important;
  background-size: contain !important;
  margin-right: .426667rem;
  margin-left: .333333rem;
}

.lock > div {
  background: url('../assets/img/class_bg_lock.png') 0 0 no-repeat !important;
  background-size: contain !important;
}

.lock .type_pinyin .class_type {
  background: url('../assets/img/pinyin_lock.png') center center no-repeat;
  background-size: 60%;
}
.lock .type_jisuan .class_type {
  background: url('../assets/img/jisuan_lock.png') center center no-repeat;
  background-size: 60%;
}
.lock .type_kuozhan .class_type {
  background: url('../assets/img/kuozhan_lock.png') center center no-repeat;
  background-size: 60%;
}
.lock .type_zuoye .class_type {
  background: url('../assets/img/zuoye_lock.png') center center no-repeat;
  background-size: 60%;
}
.lock .type_xiguan .class_type {
  background: url('../assets/img/xiguan_lock.png') center center no-repeat;
  background-size: 60%;
}


</style>

<script>
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("taskDetail");

import infoHeader from '@/components/common/infoHeader.vue'
import myStudyVue from './myStudy.vue';
export default {
  name: 'taskDetail',
  data() {
    return {
      foundationList: [],
      expansionList: [],
      clockList: [],
    }
  },

  created() {
    this.initBabyInfo();
    console.log(this.$route)
  },

  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),

    initBabyInfo() {
      this.formGet({
        API: 'queryStudentByOpenId',
        data: {
          openId: this.$route.params.openId
        }
      }).then(res => {
        // console.log(res);
        this.babyInfo = res;
        this.initData();
      }).catch(err => {

      })
    },
    initData() {
      console.log(this.$route.params.packageId)
      if(!this.$route.params.packageId) {
        this.$router.replace({
          name: 'myStudy',
          params: {
            openId: this.$route.params.openId
          }
        })

        return false;
      }
      this.post({
        API: 'queryMyStudyDetails',
        data: {
          studentId: this.babyInfo.studentId,
          startTime: this.$route.params.time,
          subjectPackageId: this.$route.params.packageId,
        }
      }).then(res => {
        console.log(res)
        this.foundationList = res.foundationList;
        this.expansionList = res.expansionList;
        this.clockList = res.clockList;
        
      }).catch(err => {

      })
    },

    toStudyPage(item) {
      console.log(item)
      // return false;
      if(item.subjectCategory == 'xgyc' || item.subjectCategory == 'zydk') {
        this.$router.push({
          name: 'studyPageSignIn',
          params: {
            openId: this.$route.params.openId,
            subjectId: item.subjectId,
          },
          query: {
            subjectPackageSubjectId: item.subjectPackageSubjectId,
            subjectPackageId: item.subjectPackageId
            // type: 'queryAllClockById'
          }
        })
      }else{
        this.$router.push({
          name: 'studyPageClass',
          params: {
            openId: this.$route.params.openId,
            subjectId: item.subjectId,
          },
          query: {
            subjectPackageSubjectId: item.subjectPackageSubjectId,
            subjectPackageId: item.subjectPackageId
            // type: 'queryAllSubjectById'
          }
        })
      }
      
    }
  },
  components: {
    infoHeader,
  }
}
</script>
